<template>
	<basic-container>
		<el-tabs v-model="tabActiveName" @tab-click="handleClick">
			<el-tab-pane label="门店自提列表" name="first">
				<avue-crud
					:option="option"
					:data="data"
					ref="crud"
					v-model="form"
					:table-loading="loading"
					:permission="permissionList"
					@row-del="rowDel"
					@row-update="rowUpdate"
					@row-save="rowSave"
					:page="page"
					@refresh-change="refreshChange"
					@search-change="searchChange"
					@search-reset="searchReset"
					@current-change="currentChange"
					@size-change="sizeChange"
					@on-load="onLoad"
				>
					<template slot-scope="" slot="menuLeft">
						<el-button @click="addNew()" size="mini" type="primary">新增</el-button>
					</template>
					<template slot-scope="scope" slot="menu">
						<el-button @click="rowDel(scope.row)" size="mini" type="text">
							<i class="el-icon-delete"></i>
							删除
						</el-button>
						<el-button @click="edit(scope.row)" size="mini" type="text">
							<i class="el-icon-edit"></i>
							编辑
						</el-button>
					</template>
				</avue-crud>
			</el-tab-pane>
<!--			<el-tab-pane label="门店自提设置" name="second">-->
<!--				<div>-->
<!--					<span style="margin: 30px;">门店自提:</span>-->
<!--					<el-switch v-model="storeWillCallSwitch" active-value="true" inactive-value="false" active-text="开启" inactive-text="关闭" @change="openSwitch"></el-switch>-->
<!--				</div>-->
<!--			</el-tab-pane>-->
		</el-tabs>

		<!-- 新增和编辑-->
		<el-dialog
			:title="dialogType == 1 ? '编辑' : '新增'"
			:wrapperClosable="false"
			:show-close="false"
			:visible.sync="drawerNew"
			:with-header="false"
			@close="closeDrawer"
			width="60%"
		>
			<div class="demo-drawer__content">
				<avue-form ref="form" v-model="obj" :option="newOption" @submit="submit">
					<template slot-scope="scope" slot="menuForm">
						<el-button @click="closeDrawer">取消</el-button>
					</template>
				</avue-form>
			</div>
		</el-dialog>
	</basic-container>
</template>

<script>
import { getList, remove, update, add, changeStoreWillCallSet,getStoreWillCallSet} from '@/api/base/store/storeWillCall';
import { mapGetters } from 'vuex';
import { testPhone } from '@/util/util.js';

export default {
	data() {
		return {
			depict:"", //描述定义
			obj: {},
			storeWillCallSwitch: false,
			newOption: {
				submitText: '完成',
				emptyBtn: false,
				labelWidth: '120',
				column: [
					// {
					// 	label: '标题',
					// 	prop: 'title',
					// 	maxlength: 12,
					// 	showWordLimit: true,
					// 	rules: [
					// 		{
					// 			required: true,
					// 			message: '请输入标题',
					// 			trigger: 'blur'
					// 		}
					// 	]
					// },
					{
						label: '门店名称',
						prop: 'storeName',
						maxlength: 12,
						showWordLimit: true,
						rules: [
							{
								required: true,
								message: '请输入门店名称',
								trigger: 'blur'
							}
						]
					},
					{
						label: '电话',
						prop: 'phone',
						rules: [
							{
								required: true,
								message: '请输入电话',
								trigger: 'blur'
							},
							{ validator: testPhone, trigger: 'blur' }
						]
					},
					{
						label: '地址',
						prop: 'address',
						maxlength: 20,
						showWordLimit: true,
						rules: [
							{
								required: true,
								message: '请输入地址',
								trigger: 'blur'
							}
						]
					},
					{
						label: '营业开始时间',
						prop: 'businessStartTime',
						type: 'time',
						format: 'HH:mm',
						valueFormat: 'HH:mm',
						width: 150,
						rules: [
							{
								required: true,
								message: '请输入营业开始时间',
								trigger: 'blur'
							}
						],
						change: ({ value }) => {
							this.obj.businessStartTime=value
							if(this.obj.businessEndTime){//先输入结束时间时，校验两个时间大小
								if (this.obj.businessStartTime > this.obj.businessEndTime) {
									this.$message.error( '开始时间不能大于结束时间' );
								}
							}
						}
					},
					{
						label: '营业结束时间',
						prop: 'businessEndTime',
						type: 'time',
						format: 'HH:mm',
						valueFormat: 'HH:mm',
						width: 150,
						rules: [
							{
								required: true,
								message: '请输入营业结束时间',
								trigger: 'blur'
							}
						],
						change: ({ value }) => {
							this.obj.businessEndTime=value
							if(this.obj.businessStartTime){//先输入开始时间时，校验两个时间大小
								if (this.obj.businessStartTime > this.obj.businessEndTime) {
									this.$message.error( '结束时间不能小于开始时间' );
								}
							}
						}
					},
					{
						label: '描述信息',
						prop: 'depict',
						maxlength: 20,
						showWordLimit: true
					}
				]
			},
			form: {},
			query: {},
			loading: true,
			drawerNew: false,
			drawerNewTitle: '新增',
			dialogType: 0, //0 新增  1编辑
			tabActiveName: 'first', //tab页切换
			rolesTree: [],
			rolesKeys: [],
			box: false,
			page: {
				pageSize: 10,
				currentPage: 1,
				total: 0
			},
			option: {
				size: 'mini',
				tip: false,
				border: true,
				index: false,
				selection: false,
				viewBtn: false,
				addBtn: false,
				editBtn: false,
				delBtn: false,
				rowKey: 'id',
				height: 'auto',
				// calcHeight: 380,
				dialogType: 'dialog',
				menuWidth: 200,
				searchMenuSpan:6,
				align:'center',
				column: [
					/*{
            label: "添加时间",
            prop: "addTime",
            width: 150,
          },*/
					/*{
            label: "标题",
            prop: "title",
            search: true,
          },*/
					{
						label: '门店名称',
						prop: 'storeName',
						search: true
					},
					{
						label: '电话',
						prop: 'phone',
						search: true
					},
					{
						label: '地址',
						prop: 'address'
					},
					{
						label: '营业开始时间',
						prop: 'businessStartTime',
						width: 150
					},
					{
						label: '营业结束时间',
						prop: 'businessEndTime',
						width: 150
					},
					{
						label: '描述信息',
						prop: 'depict'
					}
				]
			},
			data: []
		};
	},
	computed: {
		...mapGetters(['permission', 'userInfo']),
		permissionList() {
			return {};
		}
	},
	methods: {
		//新增 打开弹框
		addNew() {
			this.dialogType = 0;
			//清空this.obj
			for(let key in this.obj) {
				delete this.obj[key];
			}
			this.drawerNewTitle = '新增';
			this.drawerNew = true;
		},
		//编辑 打开弹框
		edit(data) {
			this.dialogType = 1;
			this.obj = data;
			this.drawerNewTitle = '编辑';
			this.drawerNew = true;
		},
		//新增编辑弹框的取消
		closeDrawer() {
			this.drawerNew = false;
			this.$refs.form.resetForm();
			this.$nextTick(() => {
				this.$refs['form'].clearValidate();
			});
		},
		//新增或编辑的确认
		submit(loading, done) {
			console.log(this.obj.businessStartTime);
			console.log(this.obj.businessEndTime);
			if (this.obj.businessStartTime > this.obj.businessEndTime) {
				this.$message({ type: 'error', message: '开始时间不能大于结束时间' });
				done();
				return;
			}
			this.obj.depict = this.obj.depict || ''
			console.log(this.obj);
			if (this.dialogType == 0) {
				//新增
				add(this.obj).then(
					() => {
						this.onLoad(this.page);
						this.$message({ type: 'success', message: '操作成功!' });
						this.closeDrawer();
						done();
					},
					error => {
						done();
						console.log(error);
					}
				);
			} else {
				//编辑
				update(this.obj).then(
					() => {
						this.onLoad(this.page);
						this.$message({ type: 'success', message: '操作成功!' });
						this.closeDrawer();
						done();
					},
					error => {
						done();
						console.log(error);
					}
				);
			}
		},
		rowSave(row, loading, done) {
			row.position = row.positionIds;
			row.deptName = row.$deptId;
			row.repassword = row.password;
			add(row).then(
				() => {
					loading();
					this.onLoad(this.page);
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				},
				error => {
					console.log(error);
					done();
				}
			);
		},
		rowUpdate(row, index, loading, done) {
			row.position = row.positionIds;
			update(row).then(
				() => {
					loading();
					this.onLoad(this.page);
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				},
				error => {
					console.log(error);
					done();
				}
			);
		},
		rowDel(row) {
			this.$confirm('确定将选择数据删除?', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					return remove(row.id);
				})
				.then(res => {
					if (this.data.length == 1) {
						this.page.currentPage -= 1
					}
					this.onLoad(this.page);
					if (res.data.code == 200) {
						this.$message.success('操作成功!');
					} else {
						this.$message.error(res.data.message);
					}
				});
		},
		//自提开关调取接口
		openSwitch(e) {
			changeStoreWillCallSet(e).then(res => {
				if (res.data.code == 200) {
					this.$message.success('操作成功!');
				} else {
					this.$message.error(res.data.message);
				}
			});
		},
		handleClick(tab) {
			//tab页切换
			if (tab.name == 'first') {
				this.tabActiveName = 'first';
				//隐藏设置/展示门店列表
			} else if (tab.name == 'second') {
              //隐藏门店列表/展示设置
				this.tabActiveName = 'second';
              getStoreWillCallSet().then(res => {
                if (res.data.code == 200) {
                  this.storeWillCallSwitch=res.data.data.storeWillCallSwitch;
                } else {
                  this.$message.error(res.data.message);
                }
              });
			}
		},
		searchReset() {
			this.query = {};
			this.onLoad(this.page);
		},
		searchChange(params,done) {
			this.query = params;
			this.onLoad(this.page, params,done);
		},
		currentChange(currentPage) {
			this.page.currentPage = currentPage;
		},
		sizeChange(pageSize) {
			this.page.pageSize = pageSize;
		},
		refreshChange() {
			this.onLoad(this.page);
		},
		onLoad(page, params = {},done) {
			this.loading = true;
			getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
				if(done){
					done();
				}
				this.loading = false;
				const data = res.data;
				this.page.total = data.count;
				this.data = data.data;
			});
		}
	}
};
</script>

<style></style>
